import React, { useState, useEffect } from 'react';
import { Tag, Button, Modal, message, Card, Pagination, Table } from 'antd';
import { history } from "umi"
import { ExclamationCircleOutlined, MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import request from '@/utils/request';
import OperaPrompt from '@/components/OperaPrompt'
import styles from './index.less'
import Selector from './selector'

const confirm = Modal.confirm;


const TableRow = (props: any) => {
  const { data, showToggle } = props
  return (
    <>
      <tr>
        <td className={styles.goodsInfo}>
          {data.show ? <MinusSquareOutlined onClick={showToggle(data.id, false)} /> : <PlusSquareOutlined onClick={showToggle(data.id, true)} />}
          <img src={data.goods_logo} alt="" />
          {data.goods_title}
        </td>
        <td>
          {data.activity_title}
          <div>
            开始:{data.activity_start} - 结束:{data.activity_end}
          </div>
        </td>
        <td style={{ textAlign: "center" }}> {data.goods_price}</td>
        <td style={{ textAlign: "center" }}> {data.rush_price}</td>
        <td style={{ textAlign: "center" }}> <Tag color="cyan">{data.total_sales}</Tag></td>
        <td style={{ textAlign: "center" }}> <Tag color="green">{data.total_stock}</Tag></td>
        <td style={{ textAlign: "center" }}> {data.created_at}</td>
      </tr>
      <tr className={styles.detailRow}>
        <td colSpan={7} style={data.show ? {} : { display: 'none' }} >
          <ul >
            {
              data.sku_list && data.sku_list.map((child: any, childInx: number) =>
                <li key={childInx}>
                  <span style={{ fontWeight: 600 }}>{child.sku_title}</span>
                  <div className={styles.skuDetail}>
                    <img src={child.sku_logo} alt="" />
                    <div className={styles.detailRight}>
                      <span>秒杀价：{child.rush_price}</span>
                      <span>价格：<del style={{ color: "#999" }}>{child.sku_price}</del></span>
                      <span>销量：{child.sales}</span>
                      <span>库存：{child.stock}</span>
                    </div>
                  </div>
                </li>
              )
            }
          </ul>
        </td>
      </tr>
    </>
  );
};


const goods = (props: any) => {

  const { location: { state: { activityId } } } = props
  const [tableData, setTableData] = useState({
    list: [], total: 0, idList: []
  });
  const [current, setCurrent] = useState(0);
  const [visable, setVisable] = useState(false);


  const destroy = (ids: any[]) => {
    return () => {
      confirm({
        title: 'Do you Want to delete these items?',
        icon: <ExclamationCircleOutlined />,
        onOk() {
          request(`/promote/sec-kill/activity-destroy`, {
            method: 'Delete',
            params: { ids },
          }).then((result) => {
            message.success('删除成功');
            getList();
          });
        },
      });
    };
  };

  const columns: any = [
    {
      title: '商品信息',
      dataIndex: '-',
      render: (text: any, record: any) => <div style={{ display: "flex", alignItems: "center" }}>
        <img src={record.goods_logo} alt="" style={{ width: "64px", height: "64px" }} />
        {record.goods_title}
      </div>,
    },
    {
      title: '秒杀名称',
      dataIndex: 'activity_title',
      render: (text: any) => text,
    },
    {
      title: '最大抢购',
      dataIndex: 'max_buy',
      render: (text: any) => text,
    },
    {
      title: '活动时间',
      dataIndex: '-',
      render: (text: any, record: any) => <div>
        <div>开始：{record.activity_start}</div>
        <div>结束：{record.activity_end}</div>
      </div>,
    },
    {
      title: '状态',
      width: "120px",
      dataIndex: 'status_title',
      align: "center",
      render: (text: any) => <Tag color="green">{text}</Tag>
    },
    {
      title: '操作',
      width: "160px",
      align: "center",
      render: (text: any, record: any) => (
        <>
        </>
      ),
    },
  ];

  const getList = (params: any = {}) => {
    request(`/promote/sec-kill/goods-list`, {
      params: { pageSize: 10, current, status, ...params, activityId },
    }).then((result) => {
      console.log(result)
      const { list, total, idList } = result.data
      const dataList = list.map((item: any) => ({ ...item, show: false }))
      setTableData({ list: dataList, total, idList });
    });
  };

  useEffect(() => {
    getList();
  }, []);

  const closeModal = () => {
    setVisable(false);
  };

  const showToggle = (id: number, show: any) => {
    return () => {
      const list: any = tableData.list.map((val: any) => {
        return val.id == id ? { ...val, show } : val
      })
      setTableData({ ...tableData, list })
    }
  }

  return (
    <PageHeaderWrapper title={false}>
      <Card>
        <OperaPrompt
          dataList={[
            '管理员可以在此页添加/删除参加限时秒杀活动的商品',
            '秒杀价格为参与秒杀活动时的价格，可在列表页进行编辑',
          ]}
        />
        <div style={{ margin: "5px 0 8px 0" }}>
          <Button
            type="primary"
            onClick={() => {
              // setVisable(true);
              history.push('/promote/shop/sec-kill/goods/add', { activityId })
            }}
          >
            添加商品
          </Button>
          <Button onClick={() => {
            history.push("/promote/shop/sec-kill")
          }} style={{ marginLeft: "5px" }}>返回秒杀</Button>
        </div>


        <Table
          rowKey="id"
          columns={columns}
          dataSource={tableData.list}
        />
        {/* <table style={{ width: '100%' }} className={styles.secKillGoodsTable}>
          <thead>
            <tr>
              <th>商品信息</th>
              <th>所属活动</th>
              <th style={{ width: "140px", textAlign: "center" }}>最大抢购</th>
              <th style={{ width: "140px", textAlign: "center" }}>抢购价格</th>
              <th style={{ width: "140px", textAlign: "center" }}>总销量</th>
              <th style={{ width: "140px", textAlign: "center" }}>总库存</th>
              <th style={{ width: "220px", textAlign: "center" }}>创建时间</th>
            </tr>
          </thead>
          <tbody>
            {tableData.list.map((data, inx) => <TableRow key={inx} data={data} showToggle={showToggle} />)}
          </tbody>
        </table> */}
        {/* <div style={{ paddingTop: "10px" }}>
          {
            tableData.list.length !== 0 && <Pagination defaultPageSize={10} current={current} total={tableData.total} onChange={(page, pageSize) => {
              setCurrent(page)
              // form.submit()
            }} />
          }
        </div> */}

        <Modal
          title="商品选择"
          // closable={false}
          width="60%"
          visible={visable}
          onCancel={closeModal}
          onOk={() => {

          }}
          footer={null}
        >
          <Selector idList={tableData.idList} close={closeModal} getSecKillList={getList} activityId={activityId} />
        </Modal>
      </Card>
    </PageHeaderWrapper>
  );
};

export default goods;
